aboutsummaryrefslogtreecommitdiff
path: root/pages/anime/watch/[...info].js
diff options
context:
space:
mode:
authorFactiven <[email protected]>2023-04-20 14:28:45 +0700
committerFactiven <[email protected]>2023-04-20 14:28:45 +0700
commitf1ed2b18f90b89caf47f678204d0179c640aa5e6 (patch)
treeef25e4055209bede40d0451bfa57c0e78b28eea5 /pages/anime/watch/[...info].js
parentUpdate [...id].js (diff)
downloadmoopa-f1ed2b18f90b89caf47f678204d0179c640aa5e6.tar.xz
moopa-f1ed2b18f90b89caf47f678204d0179c640aa5e6.zip
Improve Performance 1
Diffstat (limited to 'pages/anime/watch/[...info].js')
-rw-r--r--pages/anime/watch/[...info].js192
1 files changed, 120 insertions, 72 deletions
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index c70f290..3c29888 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -23,7 +23,7 @@ const VideoPlayer = dynamic(() =>
import("../../../components/videoPlayer", { ssr: false })
);
-export default function Info({ sessions, id, aniId }) {
+export default function Info({ sessions, id, aniId, provider }) {
const [epiData, setEpiData] = useState(null);
const [data, setAniData] = useState(null);
const [fallback, setEpiFallback] = useState(null);
@@ -31,6 +31,7 @@ export default function Info({ sessions, id, aniId }) {
const [statusWatch, setStatusWatch] = useState("CURRENT");
const [playingEpisode, setPlayingEpisode] = useState(null);
const [loading, setLoading] = useState(false);
+ const [playingTitle, setPlayingTitle] = useState(null);
// console.log(epiData);
@@ -68,22 +69,40 @@ export default function Info({ sessions, id, aniId }) {
let epiFallback = null;
try {
- const res = await fetch(
- `https://api.moopa.my.id/meta/anilist/watch/${id}`
- );
- const epiData = await res.json();
- setEpiData(epiData);
+ if (provider) {
+ const res = await fetch(
+ `https://api.consumet.org/meta/anilist/watch/${id}?provider=9anime`
+ );
+ const epiData = await res.json();
+ setEpiData(epiData);
+ } else {
+ const res = await fetch(
+ `https://api.moopa.my.id/meta/anilist/watch/${id}`
+ );
+ const epiData = await res.json();
+ setEpiData(epiData);
+ }
} catch (error) {
setTimeout(() => {
window.location.reload();
}, 3000);
}
- const res2 = await fetch(
- `https://api.moopa.my.id/meta/anilist/info/${aniId}`
- );
- const aniData = await res2.json();
- setAniData(aniData);
+ let aniData = null;
+
+ if (provider) {
+ const res = await fetch(
+ `https://api.consumet.org/meta/anilist/info/${aniId}?provider=9anime`
+ );
+ aniData = await res.json();
+ setAniData(aniData);
+ } else {
+ const res2 = await fetch(
+ `https://api.moopa.my.id/meta/anilist/info/${aniId}`
+ );
+ aniData = await res2.json();
+ setAniData(aniData);
+ }
if (aniData.episodes.length === 0) {
const res = await fetch(
@@ -118,6 +137,13 @@ export default function Info({ sessions, id, aniId }) {
setPlayingEpisode(playingEpisode);
+ const title = aniData.episodes
+ .filter((item) => item.id == id)
+ .find((item) => item.title !== null);
+ setPlayingTitle(
+ title?.title || aniData.title?.romaji || aniData.title?.english
+ );
+
const res4 = await fetch(
`https://api.aniskip.com/v2/skip-times/${aniData.malId}/${parseInt(
playingEpisode
@@ -256,18 +282,12 @@ export default function Info({ sessions, id, aniId }) {
console.log(formData);
};
- const playingTitle = data?.episodes
- .filter((item) => item.id == id)
- .map((item) => item.title);
-
- // console.log(skip);
+ // console.log(playingTitle.title);
return (
<>
<Head>
- <title>
- {fallback ? data.title.romaji || data.title.english : playingTitle}
- </title>
+ <title>{playingTitle}</title>
</Head>
{/* <NotificationComponent /> */}
@@ -373,7 +393,7 @@ export default function Info({ sessions, id, aniId }) {
/>
</div>
) : (
- <div className="lg:h-[693px] h-[225px] xs:h-[281px] bg-image" />
+ <div className="lg:h-[693px] h-[225px] xs:h-[281px] bg-black" />
)}
<div>
{data ? (
@@ -387,7 +407,9 @@ export default function Info({ sessions, id, aniId }) {
href={`/anime/${data.id}`}
className="inline hover:underline"
>
- {item.title}
+ {item.title ||
+ data.title.romaji ||
+ data.title.english}
</Link>
</div>
<h4 className="text-sm font-karla font-light">
@@ -530,60 +552,84 @@ export default function Info({ sessions, id, aniId }) {
<div className="grid gap-5 lg:px-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
{data ? (
data.episodes.length > 0 ? (
- data.episodes.map((item) => {
- return (
- <Link
- href={`/anime/watch/${item.id}/${data.id}`}
- key={item.id}
- className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
- item.id == id
- ? "pointer-events-none ring-1 ring-action"
- : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
- }`}
- >
- <div className="w-[40%] h-full relative shrink-0">
- <Image
- src={item.image}
- alt="image"
- height={1000}
- width={1000}
- className={`object-cover rounded-lg h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
- item.id == id
- ? "brightness-[30%]"
- : "brightness-75"
+ data.episodes.some(
+ (item) => item.title && item.description
+ ) ? (
+ data.episodes.map((item) => {
+ return (
+ <Link
+ href={`/anime/watch/${item.id}/${data.id}${
+ provider ? "/9anime" : ""
+ }`}
+ key={item.id}
+ className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+ item.id == id
+ ? "pointer-events-none ring-1 ring-action"
+ : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
+ }`}
+ >
+ <div className="w-[40%] h-full relative shrink-0">
+ <Image
+ src={item.image}
+ alt="image"
+ height={1000}
+ width={1000}
+ className={`object-cover rounded-lg h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
+ item.id == id
+ ? "brightness-[30%]"
+ : "brightness-75"
+ }`}
+ />
+ <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
+ Episode {item.number}
+ </span>
+ {item.id == id && (
+ <div className="absolute top-11 left-[105px] scale-[1.5]">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ className="w-5 h-5"
+ >
+ <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+ </svg>
+ </div>
+ )}
+ </div>
+ <div
+ className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${
+ item.id == id ? "text-[#7a7a7a]" : ""
}`}
- />
- <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
- Episode {item.number}
- </span>
- {item.id == id && (
- <div className="absolute top-11 left-[105px] scale-[1.5]">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- className="w-5 h-5"
- >
- <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
- </svg>
- </div>
- )}
- </div>
- <div
- className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${
- item.id == id ? "text-[#7a7a7a]" : ""
+ >
+ <h1 className="font-karla font-bold italic line-clamp-1">
+ {item.title}
+ </h1>
+ <p className="line-clamp-2 text-xs italic font-outfit font-extralight">
+ {item.description}
+ </p>
+ </div>
+ </Link>
+ );
+ })
+ ) : (
+ data.episodes.map((item) => {
+ return (
+ <Link
+ href={`/anime/watch/${item.id}/${data.id}${
+ provider ? "/9anime" : ""
+ }`}
+ key={item.id}
+ className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+ item.id == id
+ ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
+ : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
}`}
>
- <h1 className="font-karla font-bold italic line-clamp-1">
- {item.title}
- </h1>
- <p className="line-clamp-2 text-xs italic font-outfit font-extralight">
- {item.description}
- </p>
- </div>
- </Link>
- );
- })
+ Episode {item.number}
+ </Link>
+ );
+ })
+ )
) : (
fallback &&
fallback.map((item) => {
@@ -633,12 +679,14 @@ export async function getServerSideProps(context) {
const id = info[0];
const aniId = info[1];
+ const provider = info[2] || null;
return {
props: {
sessions: session,
id,
aniId,
+ provider,
},
};
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-15 06:31:51 +0000